<template>
  <el-container>
    <el-header>
      <usersearch @callSearch="callSearch" />
    </el-header>
    <el-main>
      <useradd ref="addchild" @callAdd="reload" />
      <useredit ref="editchild" @callEdit="reload" />
      <div>
        <el-button size="mini" type="primary" @click="onaddshow">{{
          $t("useradd.add")
        }}</el-button>
        <el-table :data="datasource" style="width: 100%; font-size: 10px" max-height="450">
          <el-table-column sortable prop="username" :label="$t('usertable.username')" width="auto" />
          <el-table-column sortable prop="emailaddress" :label="$t('usertable.emailaddress')" width="auto" />
          <el-table-column sortable prop="phone" :label="$t('usertable.phone')" width="auto" />
          <el-table-column :show-overflow-tooltip="true" sortable prop="rolenames" label="用户角色" width="auto" />
          <el-table-column sortable prop="createtime" :label="$t('usertable.createtime')" width="auto" />
          <el-table-column fixed="right" :label="$t('usertable.operation')">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="margin-right: 10px" @click="oneditshow(scope.row)">
                {{ $t("usertable.edit") }}
              </el-button>

              <el-popconfirm title="Are you sure to delete?" style="margin-right: 10px" @onConfirm="confirm(scope.row)">
                <el-button slot="reference" type="text" size="small">
                  {{ $t("usertable.remove") }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination :params="params" :total="total" @callPagin="callPagin" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import usersearch from './tablecomponents/usersearch'
  import useradd from './tablecomponents/useradd'
  import useredit from './tablecomponents/useredit'
  import {
    getuserbypage,
    deleteuser
  } from '@/api/user'
  import pagination from '@/components/Pagination/pagination'
  export default {
    name: 'Usertable',
    components: {
      usersearch,
      useradd,
      pagination,
      useredit
    },
    data() {
      return {
        total: 0,
        datasource: [],
        params: {
          pageindex: 1,
          pagesize: 10
        },
        usersearch: {
          username: '',
          emailaddress: '',
          phone: ''
        }
      }
    },
    async created() {
      await this.getuserbypage()
    },
    methods: {
      async confirm(rows) {
        var res = await deleteuser(rows)
        if (res.code === 200) {
          this.$message({
            message: 'Success',
            type: 'success'
          })

          await this.getuserbypage(this.params)
        }
      },
      async getuserbypage() {
        var par = {
          ...this.params,
          ...this.usersearch
        }
        var {
          data
        } = await getuserbypage(par)
        this.datasource = data.data
        this.total = data.total
      },
      async callPagin(paginobj) {
        this.params.pageindex = paginobj.pageindex
        this.params.pagesize = paginobj.pagesize
        await this.getuserbypage()
      },
      async callSearch(searchobj) {
        this.usersearch = {
          ...searchobj
        }
        this.params.pageindex = 1
        await this.getuserbypage()
      },
      onaddshow() {
        this.$refs.addchild.onshow()
      },
      oneditshow(obj) {
        this.$refs.editchild.onshow(obj)
      },
      async reload() {
        await this.getuserbypage()
      }
    }
  }
</script>
<style scope>
</style>
